<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
    <meta charset="UTF-8">
    <title>用户信息页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" th:inline="javascript">

    </script>
    <style>

        body {
            background-image: url("http://localhost:8088/images/201910280135559860.jpg");
        }

        #user {
            margin-left: 30%;
        }

        #l1, #l2, h2 {
            color: white;

        }

    </style>
<body>
<div class="container">
    <div class="" style="width:100%; height: 70px;padding-top: 10px;">
        <h2 style="text-align: center">收货地址</h2>
    </div>
    <br><br>

    <div id="addr" style="display: block;">
        <input type="button" class="btn btn-success" value="添加" onclick="opAddr()">
        <input type="button" class="btn btn-primary" value="我的信息" onclick="toUser()">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">地址</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="i : ${allAddress}">
                <td th:text="${i.addressDetail}"></td>
                <td>
                    <button class="btn btn-primary" th:if="${i.isDefault==1}">
                        <a style="color: white" th:href="@{/address/setDefault(aid=${i.aid})}">设置默认</a>
                    </button>
                    <button class="btn btn-primary">修改</button>
                    <button class="btn btn-danger" id="deleteAddress"><a th:if=""
                                                                         th:href="@{/address/deleteAddress(aid=${i.aid})}">删除</a>
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
<!--模态框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <form id="addrForm" action="address/doAddAddress" method="post">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 style="margin-bottom: 0;line-height: 1.5;font-size: 24px;" id="exampleModalLabel">地址编辑</h5>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" name="addressDetail" placeholder="请输入地址">
                    <input type="hidden" name="id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            onclick="$('#addrForm')[0].reset();">关闭
                    </button>
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </form>
</div>


<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <form id="addrForm" action="address/deleteAddress(aid=${i.aid})" method="post">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 style="margin-bottom: 0;line-height: 1.5;font-size: 24px;" id="exampleModalLabel">删除地址</h5>
                </div>
                <div class="modal-body">
                    <label>您确定要删除这条地址吗</label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            onclick="$('#addrForm')[0].reset();">关闭
                    </button>
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>

<script>
    //使用js方式打开模态框
    function opAddr() {
        $("#exampleModal").modal('show');

    }

    // function deleteAddress() {
    //     $("#deleteModal").modal('show');
    //
    // }
    $("#deleteAddress").click(function () {
        var de = confirm("你确定删除本条地址吗？")
    });
</script>
</html>